<template>
  <div class="exchange">
    <div :id="mxbId" ref="echarts" :style="`width:${pWidth};height:${pHeight}`"></div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')

export default {
  props: {
    mxbId: {
      type: String,
      default: ''
    },
    pWidth: {
      type: String,
      default: ''
    },
    pHeight: {
      type: String,
      default: ''
    },
    oneValue: {
      type: String,
      default: '--'
    },
    twoValue: {
      type: String,
      default: '--'
    },
    oneName: {
      type: String,
      default: ''
    },
    twoName: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: '人'
    }
  },
  data() {
    return {
      exchangeData: {
        color: ['#0058BB', '#51CEC6'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [{
          name: '',
          type: 'pie',
          radius: ['20%', '70%'],
          center: ['50%', '56%'],
          label: {
            normal: {
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            }
          },
          data: [{
            value: 0,
            name: ''
          },
          {
            value: 0,
            name: '',
            selected: true
          }
          ]
        }]
      },
      exchangeChart: null
    }
  },
  mounted() {
    this.selfAdaption()
    this._getData()
  },
  methods: {
    _getData() {
      this.exchangeChart = echarts.init(document.getElementById(this.mxbId))
      this.exchangeChart.setOption(this.exchangeData)
      let percent1 = Number.isNaN(Math.round(Number(this.oneValue) / (Number(this.oneValue) + Number(this.twoValue)) * 10000) / 100.00) ? '' : Math.round(Number(this.oneValue) / (Number(this.oneValue) + Number(this.twoValue)) * 10000) / 100.00 + '%'
      let percent2 = Number.isNaN(Math.round(Number(this.twoValue) / (Number(this.oneValue) + Number(this.twoValue)) * 10000) / 100.00) ? '' : Math.round(Number(this.twoValue) / (Number(this.oneValue) + Number(this.twoValue)) * 10000) / 100.00 + '%'
      // this.exchangeData.series[0].data[1].value = Number(this.oneValue)
      // this.exchangeData.series[0].data[1].name = `${this.oneName}${percent1}\n\n${this.oneValue}${this.unit}`
      // this.exchangeData.series[0].data[0].value = Number(this.twoValue)
      // this.exchangeData.series[0].data[0].name = `${this.twoName}${percent2}\n\n${this.twoValue}${this.unit}`
      this.exchangeChart.setOption({
        series: [{
          data: [{
            value: Number(this.oneValue),
            name: `${this.oneName}${percent1}\n\n${this.oneValue}${this.unit}`
          },
          {
            value: Number(this.twoValue),
            name: `${this.twoName}${percent2}\n\n${this.twoValue}${this.unit}`,
            selected: true
          }
          ]
        }]
      })
    },
    selfAdaption () {
      let _this = this
      setTimeout(() => {
        window.addEventListener('resize', function () {
          _this.exchangeChart.resize()
        })
      }, 10)
    }
  },
  watch: {
    oneValue() {
      this._getData()
    },
    twoValue() {
      this._getData()
    }
  }
}
</script>

<style>

</style>
